<template>
  <div>
    <a-modal :visible="true" :footer="null" :width="700" @cancel="cancelEvent" class="orderModal">
      <div class="infoModal">编辑信息</div>
      <a-form-model ref="ruleForm" :model="newform" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules" class="formAddModel">
        <a-form-model-item ref="name" label="员工姓名" prop="name">
          <a-input v-model="newform.name" @blur="
          () => {
            $refs.name.onFieldBlur();
          }
        " />
        </a-form-model-item>
        <a-form-model-item label="归属网格名称" ref="grid" prop="grid" >
          <a-input v-model="newform.grid" @blur="
          () => {
            $refs.grid.onFieldBlur();
          }
        " />
        </a-form-model-item>
        <a-form-model-item ref="mobile" label="联系电话" prop="mobile">
          <a-input v-model="newform.mobile" @blur="
          () => {
            $refs.mobile.onFieldBlur();
          }
        " />

        </a-form-model-item>
     
        <a-form-model-item ref="gridType" label="归属网格编码" prop="gridType">
          <a-input v-model="newform.gridType" @blur="
          () => {
            $refs.gridType.onFieldBlur();
          }
        " />
        </a-form-model-item>
         <a-form-model-item ref="type" label="类型" prop="type">
          <a-input v-model="newform.type" @blur="
          () => {
            $refs.type.onFieldBlur();
          }
        " />
        </a-form-model-item>
        <a-form-model-item ref="area" label="归属" prop="area">
          <a-select v-model="newform.area" placeholder="请选择归属">
            <a-select-option value="鼓楼">
              鼓楼
            </a-select-option>
            <a-select-option value="福清">
              福清
            </a-select-option>
            <a-select-option value="长乐">
              长乐
            </a-select-option>
            <a-select-option value="闽侯">
              <!-- //disabled -->
              闽侯
            </a-select-option>
            <a-select-option value="罗源">
              罗源
            </a-select-option>
            <a-select-option value="闽清">
              闽清
            </a-select-option>
            <a-select-option value="连江">
              连江
            </a-select-option>
            <a-select-option value="平潭">
              平潭
            </a-select-option>
            <a-select-option value="永泰">
              永泰
            </a-select-option>
            <a-select-option value="马尾">
              <!-- //disabled -->
              马尾
            </a-select-option>
            <a-select-option value="晋安">
              晋安
            </a-select-option>
            <a-select-option value="仓山">
              仓山
            </a-select-option>
            <a-select-option value="台江">
              台江
            </a-select-option>
            <a-select-option value="市级">
              市级
            </a-select-option>
            <a-select-option value="市级-管理">
              市级-管理
            </a-select-option>
            <a-select-option value="省级-管理">
              省级-管理
            </a-select-option>
            <a-select-option value="省级">
              省级
            </a-select-option>


          </a-select>
        </a-form-model-item>
        <a-form-model-item ref="staffType" label="人员类型" prop="staffType">
          <a-input v-model="newform.staffType" @blur="
          () => {
            $refs.staffType.onFieldBlur();
          }
        " />

        </a-form-model-item>
         <a-form-model-item ref="remark" label="备注" prop="remark">
          <a-input v-model="newform.remark" @blur="
          () => {
            $refs.remark.onFieldBlur();
          }
        " />
        
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 10, offset: 10 }">
          <a-button type="primary" @click="onSubmit">
            提交
          </a-button>
          <a-button style="margin-left: 10px;" @click="onCancel">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>

    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { addMember, modifyKjInfo } from '@/api/public'
// import { getUrgeData } from '@/api/public'

export default {
  props: ['form', 'clickType'],
  data() {
    return {
      lodaing: false,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      dataSource: [],
      newform:{},
      rules: {
        name: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        area: [{ required: true, message: '请选择', trigger: 'change' }],
        grid: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        gridType: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        staffType: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        type: [{ required: true, message: '请输入完整', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入电话', whitespace: true },
          { validator: this.phoneCheck.bind(this) },
        ],
        staffType: [{ required: true, message: '请输入人员类型', trigger: 'blur' }],
        account: [
          { type: 'email', message: '邮箱的格式不正确' },
          { required: true, message: '请输入你的邮箱!' },
        ],
        roleName: [{ required: true, message: '请选择你的角色', trigger: 'change' }],
      },
    }
  },
  created() {},
  mounted() {
   
   this.newform =this.form 
  },
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {        
            modifyKjInfo(this.newform).then((response) => {
              if (response != undefined) {
                if (response.code == 200) {
                  let type = 'success'
                  this.$notification[type]({
                    message: '温馨提示',
                    description: '编辑成功!',
                    duration: 3,
                  })
                  this.$emit('successEvent')
                }
              }
            })
          
        } else {
          return false
        }
      })
    },
    phoneCheck(rule, value, callbackFn) {
      const reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
      if (!reg.test(value)) {
        callbackFn('手机号码格式不正确')
        return
      }
      callbackFn()
    },
    handleChange(e) {
      this.newform.roleName = e
    },
    onCancel() {
      this.$emit('cancelEvent')
    },
    handleTableChange() {},
    addMember() {},
    cancelEvent() {
      this.$emit('cancelEvent')
    },
  },
}
</script>

<style lang="less">
.infoModal {
  height: 51px;
  background: rgba(255, 255, 255, 1);
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}

</style>
